<template>
	<div>
	<div>
		<h1>球队排名</h1>
	<div class="media" >
		
		<div class="media_name">东部联盟</div>
		<div class="media_tname">
		<span class="ball_team">球队</span>
		<span class="ball_new">胜</span>
		<span class="ball_new">负</span>
		<span class="ball_new">胜率</span>
		<span class="ball_new">胜差</span>
		
		</div>
	<div class="ball_teams" v-for="i in westList">
   <span class="ball_tab1">
	<span class="ball_logo">{{i.name.id}}</span>
	<span class="ball_logo"><img :src="i.name.logo"/></span>
	<span  class="ball_teamsname">{{i.name.team}}</span>
	</span><span class="ball_tab2">
    	<span class="ball_logo">{{i.name.sheng}}</span>
    	<span class="ball_logo">{{i.name.fu}}</span>
    	<span class="ball_logo">{{i.name.shenglu}}</span>
    	<span class="ball_logo">{{i.name.shengcha}}</span>
    	
    </span>
	</div>
	
	</div>
	<div class="media">
		
		<div class="media_name">西部联盟</div>
		<div class="media_tname">
		<span class="ball_team">球队</span>
		<span class="ball_new">胜</span>
		<span class="ball_new">负</span>
		<span class="ball_new">胜率</span>
		<span class="ball_new">胜差</span>
		
		</div>
	<div class="ball_teams" v-for="i in eastList">
   <span class="ball_tab1">
	<span class="ball_logo">{{i.name.id}}</span>
	<span class="ball_logo"><img :src="i.name.logo"/></span>
	<span  class="ball_teamsname">{{i.name.team}}</span>
	</span><span class="ball_tab2">
    	<span class="ball_logo">{{i.name.sheng}}</span>
    	<span class="ball_logo">{{i.name.fu}}</span>
    	<span class="ball_logo">{{i.name.shenglu}}</span>
    	<span class="ball_logo">{{i.name.shengcha}}</span>
    	
    </span>
	</div>
	
	</div>
	</div>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				westList: [],
				eastList: []
			}
		},
		methods:{
			request(type){
				this.$http({
					url: '/static/nba.json',
					params: {
						category: type
					},
					method: 'GET'
				}).then(function(data){
//					 console.log(data.bodyText);
					this.westList=JSON.parse(data.bodyText).dongbu;
					console.log(this.westList);
					this.eastList=JSON.parse(data.bodyText).xibu;
					console.log(this.eastList);
					
				});
			}
		},
		mounted(){
			this.request();
		}
		}
</script>

<style>
	.ball_logo{
		display: inline-block;
		height: 1.203125rem;
		width: 1.125rem;
		
	}
	.ball_logo img{
		height: 1.203125rem;
		width: 1.125rem;
	}
	.ball_tab1{
		
		display:block;
		float: left;
		height:1.303125rem;
		line-height:1.203125rem;
		border-right:0.03125rem solid #E6E6E6;
		
		border-bottom: 0.03125rem solid  #E6E6E6;
	}
	.ball_tab2{
		width: 5.354rem;
		float: left;
		display: block;
		border-bottom: 0.03125rem solid  #E6E6E6;
		height:1.303125rem;
		line-height:1.203125rem;
		border-right:0.03125rem solid #E6E6E6;
	}
	.ball_teamsname{
		display: inline-block;
		height: 1.203125rem;
		width: 2.234375rem;
		
	}
	.ball_new{
		display: inline-block;
		height: 1.203125rem;
		width: 1.125rem;
	}
	.ball_team{
		text-align: left;
		display: inline-block;
		height:1.203125rem;
		line-height:1.203125rem;
		width: 4.5625rem;
	}
	.media_tname{
		font-size: .4rem;
		background-color:#072840 ;
		color: white;
		height:1.203125rem;
	}
	.media{
		overflow: hidden;
		margin-top:-0.015625rem;
		text-align: center;
	}
	h1{text-align: center;
		height:1.015625rem;
		line-height:1.015625rem ;
		color: white;
		
		font-size: .5rem;
		background-color: #002f50;
	}
	.media_name{
		font-size: .45rem;
		color: white;
		background-color:#006BB6 ;
		height:1.015625rem;
		line-height:1.015625rem ;
	}
	
</style>